<template>
  <!-- 个人中心 我的通知 -->
  <div id="mytz">
    <div class="tz_box">
      <!-- 头部订单状态选项卡 -->
      <div class="top_option">
        <span
          v-for="(item,index) in order_option"
          :key="index"
          :class="currentIndex === index ? 'bgcolor' : '' "
          @click="tab_option(index)"
        >{{item}}</span>
      </div>

      <!-- 系统通知模块 -->
      <div class="xt_tz" v-show="currentIndex === 0">
        <ul>
          <li v-for="(item,index) in xt_list" :key="index">
            <span>{{item.tz_time}}</span>
            <span>{{item.tz_desc}}</span>
          </li>
        </ul>
      </div>
      <!-- 订单通知模块 -->
      <div class="order_tz" v-show="currentIndex === 1">
        <ul>
          <li v-for="(item,index) in ordertz_list" :key="index">
            <span>{{item.tz_time}}</span>
            <span>{{item.tz_desc}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order_option: ["系统通知", "订单通知"], //通知的两种状态
      currentIndex: 0, //头部状态选项卡默认下标
      //系统通知列表
      xt_list: [
        {
          tz_time: "2019-06-30 15:20",
          tz_desc: "您提交的企业认证信息认证失败，请重新上传认证信息！"
        },
        {
          tz_time: "2019-06-30 15:20",
          tz_desc: "您提交的个人认证信息已认证成功！"
        }
      ],
      //系统通知列表
      ordertz_list: [
        {
          tz_time: "2019-06-30 15:20", //订单通知时间
          tz_desc:
            "订单编号XXXXXXXXXXXXXXXX的订单已发货，可前往订单详情查看发货信息。" //订单通知
        },
        {
          tz_time: "2019-06-30 15:20",
          tz_desc: "订单编号XXXXXXXXXXXXXXXX的订单已收货，交易完成！"
        }
      ]
    };
  },
  methods: {
    //   头部选项卡切换
    tab_option(i) {
      this.currentIndex = i;
    }
  }
};
</script>

<style lang="scss" scoped>
.tz_box {
  width: 940px;
  height: 800px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 5px 0px rgba(204, 196, 196, 0.15);
  padding: 20px;
  box-sizing: border-box;
  .top_option {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    & span:nth-of-type(1) {
      margin-left: 60px;
    }
    span {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-right: 160px;
      padding: 10px;
      border-bottom: 2px solid #fff;
    }
  }
  //系统通知模块
  .xt_tz {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      margin-top: 26px;
      min-height: 300px;

      li {
        height: 120px;
        background: rgba(245, 245, 245, 1);
        border-radius: 6px;
        margin-bottom: 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 20px;
        box-sizing: border-box;
        & span:nth-of-type(1) {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 300;
          margin-bottom: 20px;
        }
        & span:nth-of-type(2) {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 300;
          color: rgba(102, 102, 102, 1);
        }
      }
    }
  }
  //订单通知模块
  .order_tz {
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      margin-top: 26px;
      min-height: 300px;

      li {
        height: 120px;
        background: rgba(245, 245, 245, 1);
        border-radius: 6px;
        margin-bottom: 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 20px;
        box-sizing: border-box;
        & span:nth-of-type(1) {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 300;
          margin-bottom: 20px;
        }
        & span:nth-of-type(2) {
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: 300;
          color: rgba(102, 102, 102, 1);
        }
      }
    }
  }
}
// 头部订单状态栏切换时下方横线
.bgcolor {
  border-bottom: 2px solid rgba(240, 58, 88, 1) !important;
  color: rgba(240, 58, 88, 1) !important;
}
</style>